<template>
	<navbar />
	<div class="content">
		<img class="img" src = "../../../static/img/myimg.png" style="width: 8rem; height: 8rem; border-radius: 100%;"/>
		<!-- <p class="nickname">{{userinfo.username}}</p>
		<p class="info">{{userinfo.intro}}</p> -->
	</div>
		<!-- <div class="content"></div> -->
		<van-cell-group title="我的订单">
			<van-grid clickable>
				<van-grid-item icon="photo-o" text="全部" />
				<van-grid-item icon="photo-o" text="待付款" to="/test" />
				<van-grid-item icon="photo-o" text="待发货" to="/test" />
				<van-grid-item icon="photo-o" text="待收货"  to="/test" />
			</van-grid>
		</van-cell-group>
		<van-cell-group title="基本资料">
			<van-cell title="个人资料" is-link to="/uc/profile"></van-cell>
			<van-cell title="收货地址" is-link to="/uc/address"></van-cell>
			<van-cell title="关于" is-link to="/demo"></van-cell>
		</van-cell-group>
</template>

<script lang="ts" setup>
	import {
		reactive,
		onMounted
	} from 'vue';
	import {
		getUserInfo
	} from '@/api/user.ts';
	import router from '@/router'

	const userinfo = reactive({
		"username": "昵称",
		"intro": "这里是用户的介绍信息",
		"avator": "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
	})
	
	const afterRead = (file) => {
	      // 此时可以自行将文件上传至服务器
	      console.log(file);
	};
	const $emit = defineEmits(['change'])


	onMounted(() => {
		// 触发的事件， 传递的参数
		$emit("change", 3)
		console.log("this is on mounted")
		getData()
	})
	
	const getData = () => {
		const id = 1
		getUserInfo(id)
		.then(res => {
			console.log('getUserInfo', res)
			if(res.code != 0){
				console.log(`获取数据失败，` + res.message);
			} else {
				userinfo.username = res.data.username
				userinfo.intro = res.data.intro
				console.log("获取数据成功")
			}
		})
		.catch(err => {
			console.log(err, `服务端错误`)
		})
	}
	
</script>

<style>
	.content {
		background-color: #FFCCC7;
		width: 100%;
		height: 360px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

/* 	.member-detail {
		font-size: 14px;
	} */
	
	* {
		font-size: 16px;
	}
</style>
